<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
		*{padding:0;margin:0;}
		.container{width:100%;height:612px;}
	</style>
</head>
<body>
	<div class="container">
		
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.2.0/vconsole.min.js"></script>
	<script src="../../dist/canvas-keyframes.min.js"></script>
	<script>
		// 初始化vConsole
		window.vConsole = new window.VConsole();
		console.info('欢迎使用 vConsole。可用于展示 console 日志，方便开发、调试。');
		
		window.onload = function(){
			var count = 0;
			var imgArr = [];
			for(var i=1;i<=32;i++){
				(function(i){
					var img = new Image();
					img.onload = function(){
						img.onload = null;
						count++;
						// 有可能图片加载有快有满慢，所以用角标存
						imgArr[i-1] = img;
						if(count==32){
							keyFrames(imgArr);
						}
					}
					img.onerror = function(){
					}
					img.src = 'imgs/'+i+'.jpg';
				})(i);
			}
		}
		var keyFrames;
		function keyFrames(imgArr){
			keyFrames = new CanvasKeyFrames(document.querySelector('.container'), 'array', imgArr, {
				fps:10,
				width:375,
				height:612
			});
			keyFrames.play();
		}
	</script>
</body>
</html>